<template>
    <div style="background: #f7f7f7;">
        <div class="jncx">
            <div class="mui-input-row">
                <h3>
                    <a id="choose_xl_type" href="#">
                        <span id="c_month">日期查询</span>
                        <img src="@/assets/tap-water/images/xl.png" alt="">
                    </a>
                </h3>
                <input type="text" id="xl_type" hidden/>
            </div>
            <dl class="que">
                <dt><img src="@/assets/tap-water/images/que.png" alt=""></dt>
                <dd>暂时没有数据</dd>
            </dl>
        </div>
    </div>
</template>

<script>
    import "@/assets/utils/mui/css/mui.min.css";
    import "@/assets/utils/mui/css/mui.picker.css";
    import "@/assets/utils/mui/css/mui.poppicker.css";
    import "@/assets/utils/mui/css/mui.dtpicker.css";

    import * as $ from "@/utils/jquery.min.js"
    import mui from "@/utils/mui/js/mui.min.js";
    import "@/utils/mui/js/mui.picker.js";
    import "@/utils/mui/js/mui.poppicker.js";
    import "@/utils/mui/js/mui.dtpicker.js";

    export default {
        name: "list05",
        mounted() {
            mui.init();

            $("#choose_xl_type").click(function () {
                const dtPicker = new mui.DtPicker({type: "month"});
                dtPicker.show(function (selectItems) {
                    const y = selectItems.y.text;  //获取选择的年
                    const m = selectItems.m.text;  //获取选择的月
                    const date = y + "年" + m + "月";
                    $("#c_month").html(date);
                })
            });
        }
    }

</script>
<style scoped></style>
